<template>
	<view class="content u-safe-area-inset-bottom">
		<u-navbar title="团购详情" :autoBack="false" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' @leftClick="leftClick" left-icon-size="32rpx" bg-color="#FF594D">
		</u-navbar>

		<view class="swiper_content">
			<u-swiper height="750rpx" :list="list" @change="e => current = e.current" :autoplay="false">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<view class="share">
				<button open-type="share">
					<image src="../static/images/detail-page/Group 8@2x.png" mode=""></image>
				</button>
			</view>
			<!-- <view class="buy_list">
				<template v-for="(item,index) in buy">
					<view class="buy_item" :key="index">
						{{item.user}}购买了此商品
					</view>
				</template>
			</view> -->
		</view>
		<view class="goods_price">
			<view class="price_top">
				<view class="left">
					<view class="current_price">
						<text class="group_price">团购价</text> <text>￥</text>{{goodsInfo.specificationPrice.toFixed(2)}}
					</view>
				</view>
				<view class="original_group">
					<!-- 原价￥300元x70% -->
				</view>
			</view>
			<view class="tags">
				<!-- 	<view class="tag_item">
					全场优惠券
				</view> -->
				<view class="tag_item">
					7天无忧快速退货
				</view>
				<!-- 				<view class="tag_item">
					满10元免邮费
				</view> -->
			</view>
			<view class="goods_title">
				{{goodsInfo.commodityName}}
			</view>
		</view>
		<view class="goods_num">
			<view class="goods_num_content">
				<view class="goods_img">
					<image :src="goodsInfo.image" mode=""></image>
				</view>
				<view class="adjustment">
					<view class="price">
						<text>团购价格：</text>￥{{(goodsInfo.specificationPrice).toFixed(2)}}
					</view>
					<view class="adjustment_num price">
						<text>{{goodsInfo.buyQuantity}}人团购：</text>{{goodsInfo.joinQuantity}} 人
					</view>
				</view>
			</view>
		</view>
		<view class="group_user">
			<view class="group_wapper">
				<view class="group_title">
					拼团剩余人数
				</view>
				<view class="group_residue">
					{{goodsInfo.buyQuantity - goodsInfo.joinQuantity!=0?'距离拼团还差'+(goodsInfo.buyQuantity-goodsInfo.joinQuantity)+'人':'已拼团完成'}}
				</view>
				<view class="group_person">
					<view class="person_list">
						<template v-for="(item,index) in goodsInfo.buyQuantity ">
							<view class="person_item" :key="index">
								<image
									:src="(index+1)<goodsInfo.joinQuantity?'../static/images/detail-page/Ellipse 19@2x.png':'../static/images/detail-page/Frame 828@2x.png'"
									mode=""></image>
								<view class="group" v-if="index==0&&goodsInfo.sponsorId!=null">
									团长：{{goodsInfo.xxx}}
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="invite" v-if='goodsInfo.buyQuantity - goodsInfo.joinQuantity!=0'>
					<button open-type="share" class="invite" v-if="isNoBuy">
						<view class="invite_btn" @click="inviteFriend">
							邀请好友参团
						</view>
					</button>
					<view class="invite_btn" v-else @click="joinGroup">
						参团
					</view>
				</view>
			</view>
		</view>

		<view class="open_group">

		</view>
		<!-- <view class="specification">
			商品详情
		</view> -->
		<!-- 	<view class="goods_detail_img">
			<image src="../static/images/detail-page/Slice 28@2x.png" mode=""></image>
			<image src="../static/images/detail-page/Slice 28@2x.png" mode=""></image>
			<image src="../static/images/detail-page/Slice 28@2x.png" mode=""></image>
			<image src="../static/images/detail-page/Slice 28@2x.png" mode=""></image>
		</view> -->
		<!-- <view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" style="margin-top: 20px;" />
		</view> -->
	</view>
</template>

<script>
	import {
		getBuyInfo,
		isNoBuy,
		getCommodityInfo
	} from '../../api/index.js'

	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '团购:' + this.goodsInfo.commodityName,
				imageUrl: this.goodsInfo.image
			}
		},
		onLoad(option) {
			this.pageArr = getCurrentPages();
			// console.log(option.id);
			this.goodsId = option.id
			this.getBuyInfoData(option.id)
		},
		onShow() {
			this.$store.commit('setCouponId', 0)
			this.$store.commit('setAddressId', 0)
			this.getBuyInfoData(this.goodsId)
		},
		data() {
			return {
				list: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				titleStyle: {
					color: '#fff',
				},
				goodsNum: 1,
				current: 0,
				buy: [{
					user: "梁**"
				}, {
					user: "祝**"
				}, {
					user: "冯**"
				}],

				goodsInfo: {
					specificationPrice: 2,
					priceOriginally: 1
				},
				goodsId: '',
				goods: {},
				isNoBuy: false
			}
		},

		methods: {
			// 获取单个商品信息
			async getBuyInfoData(id) {
				const res = await getBuyInfo(id)
				// console.log(res);
				this.goodsInfo = res.data
				if (!this.$store.getters.getIsLogin) {
					return
				}
				this.getIsNoBuy(this.goodsInfo.buyNumber)
				this.getCommodityData(this.goodsInfo.commodityId)
			},
			async getCommodityData(id) {
				const res = await getCommodityInfo(id)
				if (res.code == 200) {
					this.list = res.data.carousel.split(',')
				}
			},
			async getIsNoBuy(buyNumber) {
				const res = await isNoBuy(buyNumber)
				// console.log(res);
				this.isNoBuy = res.data
			},
			leftClick() {
				// console.log(this.pageArr);
				if (this.pageArr.length >= 2) {
					uni.navigateBack()
					return
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 参与拼团
			joinGroup() {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: `/pages_mine/pages/order-form/order-form?id=${this.goodsInfo.commodityId}&number=1&buyNumber=${this.goodsInfo.buyNumber}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		overflow-x: hidden;
		padding-bottom: 100rpx;

	}

	.goods_nav {
		// #ifdef MP-WEIXIN
		padding-bottom: 40rpx;
		background-color: #fff;
		// #endif
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(0, 0, 0, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #000;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.group_user {
		padding: 20rpx;

		.group_wapper {
			width: 710rpx;
			// height: 746rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding-bottom: 40rpx;

			.group_title {
				padding: 40rpx 55rpx 30rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FF594D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// position: relative;
				text-align: center;
			}

			.group_title::after,
			.group_title::before {
				content: '';
				width: 157.5rpx;
				height: 2rpx;
				background-color: #F44236;
			}

			.group_residue {
				font-size: 26rpx;
				font-family: Inter, Inter;
				font-weight: 400;
				color: #333332;
				text-align: center;
				padding-bottom: 40rpx;

				text {
					font-size: 30rpx;
					color: #FF594D;
				}
			}

			.group_person {

				.person_list {
					padding: 0 35rpx 80rpx;
					display: flex;
					flex-wrap: wrap;

					.person_item {
						width: 100rpx;
						height: 100rpx;
						border-radius: 999rpx;
						margin-right: 35rpx;
						margin-bottom: 30rpx;
						position: relative;

						.group {
							// width: 69rpx;
							padding: 0 15rpx;
							height: 30rpx;
							text-align: center;
							border-radius: 99rpx;
							position: absolute;
							bottom: -15rpx;
							background-color: #FFA242;
							white-space: nowrap;
							left: 50%;
							transform: translateX(-50%);
							font-size: 20rpx;
							color: #FFFFFF;
						}

						&:nth-of-type(5n+0) {
							margin-right: 0;
						}

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

			}

			.invite {
				padding: 0 55rpx;

				button {
					border: 0;
					background-color: transparent;
					padding: 0;

					&::after {
						content: '';
						border: 0;
					}
				}

				.invite_btn {
					width: 600rpx;
					height: 68rpx;
					background: #FF594D;
					border-radius: 104rpx 104rpx 104rpx 104rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 68rpx;
				}
			}
		}
	}

	.buy_list {
		position: absolute;
		bottom: 0;
		right: 0;

		.buy_item {
			width: 260rpx;
			height: 40rpx;
			color: #fff;
			line-height: 40rpx;
			font-size: 26rpx;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 18rpx;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.swiper_content {
		position: relative;

		.share {
			z-index: 1;
			position: absolute;
			right: 0;
			bottom: 0;

			button {
				border: 0;
				background-color: transparent;
				padding: 0;
				border-radius: 0;

				&::after {
					border: 0;
				}
			}

			image {
				width: 134rpx;
				height: 88rpx;
				display: block;
			}
		}
	}

	.goods_price {
		// height: 138rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 18rpx 30rpx 20rpx;

		.price_top {
			display: flex;

			.left {
				margin-right: 50rpx;

				.current_price {
					font-size: 32rpx;
					display: flex;
					height: 45rpx;
					align-items: center;
					font-weight: bold;
					padding-right: 10rpx;
					color: #F4473B;

					text {
						font-size: 26rpx;
						font-weight: normal;
					}

					.group_price {
						font-size: 20rpx;
						color: #777777;
					}
				}

				display: flex;
			}

			.original_group {
				color: #777;
			}
		}

		.tags {
			color: #FFA242;
			display: flex;

			.tag_item {
				padding: 6rpx 10rpx;
				font-size: 18rpx;
				border-radius: 6rpx;
				background-color: #faf5eb;
				line-height: 38rpx;
				margin-right: 10rpx;
			}
		}

		.goods_title {
			padding-top: 10rpx;
			font-size: 32rpx;
			color: #333332;
		}

	}

	.goods_num {
		height: 325rpx;
		background: #faf5eb;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		box-sizing: border-box;
		padding: 20rpx;

		.goods_num_content {
			width: 710rpx;
			height: 275rpx;
			padding: 49rpx 78rpx;
			background-color: #fff;
			box-sizing: border-box;
			display: flex;

			.goods_img {
				width: 258rpx;
				height: 178rpx;
				border-radius: 10rpx 0 10rpx 0;
				overflow: hidden;
				border-right: 2rpx dashed #FFA242;

				image {
					width: 178rpx;
					height: 178rpx;
				}
			}

			.adjustment {
				padding-left: 80rpx;
				padding-top: 31rpx;

				.price {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #F44236;

					text {
						color: #333332;
						font-size: 26rpx;
					}
				}

				.adjustment_num {
					display: flex;
					align-items: center;
					margin-top: 35rpx;

					button {
						background-color: transparent;
						padding: 0;
						border: 0;
						color: #777777;
						font-size: 44rpx;
						border-radius: 0;

						&::after {
							border: 0;
						}
					}

					input {
						background-color: #FFA242;
						border-radius: 55rpx;
						width: 116rpx;
						height: 51rpx;
						text-align: center;
						padding: 0;
						margin: 0 10rpx;
					}
				}
			}
		}

	}

	.specification {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF594D;
		width: 750rpx;
		height: 69rpx;
		background: #FFFFFF;
		line-height: 69rpx;
		padding-left: 20rpx;
	}

	.goods_detail_img {
		padding-bottom: 150rpx;

		image {
			width: 750rpx;
			height: 1027rpx;
		}
	}
</style>